<template>
  <div style="text-align: left; background-color: #f6f7f9; height:670px;">
    <!-- 顶部导航 -->
    <van-sticky>
      <van-nav-bar title="确认订单" left-arrow @click-left="$router.go(-1)">
      </van-nav-bar>
    </van-sticky>

    <van-cell :label="orderInfo.address" @click="updateAddress" is-link style="margin-top: 10px;">
      <template #icon>
        <van-icon name="free-postage" size="40" style="padding-right: 10px;"/>
      </template>
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <span class="name" style="font-weight: bold;">{{ orderInfo.name }}</span>
        <span class="tel" style="margin-left: 20px;">{{ orderInfo.tel }}</span>
      </template>
    </van-cell>
    <van-cell title="快递公司" is-link  @click="show_picker = true" :value="orderInfo.company"/>
    <van-popup v-model="show_picker" position="bottom">
      <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="show_picker = false"
      />
    </van-popup>
    <van-cell title="取件信息" @click="show_message=true" is-link :value="orderInfo.message"/>
    <van-popup position="top" closeable v-model="show_message">
      <h3 style="text-align: center; padding: 15px;">修改取件信息</h3>
      <van-form @submit="updateOrder()">
        <van-field
            v-model="orderInfo.message"
            name="取件信息"
            placeholder="输入取件信息,取件号或短信"
            style="background: #e5e5e7; border-radius: 15px;"
            :rules="[{ required: true, message: '请填写取件信息' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </van-popup>
    <van-cell title="订单备注" @click="show_remark=true" is-link :value="orderInfo.remark"/>
    <van-popup position="top" closeable v-model="show_remark">
      <h3 style="text-align: center; padding: 15px;">修改订单备注</h3>
      <van-form @submit="updateOrder()">
        <van-field
            v-model="orderInfo.remark"
            name="订单备注"
            placeholder="输入订单备注,如有大件物品请备注"
            style="background: #e5e5e7; border-radius: 15px;"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </van-popup>
    <van-cell title="订单编号" :value="orderInfo.sn"/>
    <van-cell title="创建时间" :value="orderInfo.createTime"/>

    <div style="background: white; margin-top: 10px; padding: 10px;">
      <van-radio-group v-model="paymentInfo.type" direction="horizontal">
        <span style="padding-right: 20px; margin-left: 5px; font-size: 14px;">支付方式</span>
        <van-radio name="1">支付宝</van-radio>
        <van-radio name="2">微信</van-radio>
        <van-radio name="3">线下支付</van-radio>
      </van-radio-group>
    </div>
    <div style="background: white; margin-top: 200px; padding: 15px; text-align: right;">
      <van-button @click="orderPay" round type="info">立即支付</van-button>
    </div>

  </div>
</template>

<script>
export default {
  name: "OrderPayment",
  data() {
    return {
      show_message:false,
      show_remark:false,
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      show_picker: false,
      orderInfo: {
        id: '',
        name: '周杰伦',
        tel: '15770641554',
        address: '江西省宜春市袁州区宜春学院',
        company: '京东速递',
        message: '1-1356',
        remark: '下午送到就行',
        sn: '2301272039309189248',
        createTime: '2023-01-11T11:29:49',
      },
      paymentInfo:{
        type:'',
        orderSn:''
      }
    };
  },
  methods: {
    loadOrderInfo() {
      console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:9080/orders/new';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log(response.data.data);
        let responseBody = response.data.data;
        this.orderInfo = responseBody;
        console.log("当前表单数据->>>>>>", this.orderInfo);
      })
    },
    onConfirm(value) {
      this.orderInfo.company = value;
      this.updateOrder();
      this.show_picker = false;
    },
    updateOrder(){
      let url = 'http://localhost:9080/orders/'+this.orderInfo.id+'/update';
      let orderInfo = this.qs.stringify(this.orderInfo, {arrayFormat: 'repeat'});
      console.log('orderInfo = ' + orderInfo);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, orderInfo).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        if (responseBody.state == 20000) {
          this.$toast.success('修改成功!');
          this.loadOrderInfo();
        }else{
          this.$toast.fail(responseBody.message);
        }
      });
    },
    updateAddress() {
      let orderId = this.orderInfo.id;
      localStorage.setItem('orderId', orderId);
      this.$router.push("/order/update-address");
    },
    loadCompany() {
      console.log('在localStorage中的JWT数据：' + localStorage.getItem('jwt'));
      let url = 'http://localhost:9080/companies';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        console.log(response.data.data);
        let responseBody = response.data.data;
        let companyName = [];
        for (let i = 0; i < responseBody.length; i++) {
          companyName[i] = responseBody[i].name
        }
        this.columns = companyName;
      })
    },
    orderPay(){
      this.$toast.loading({
        message: '支付中...',
        forbidClick: true,
      });
      let url = 'http://localhost:9080/payments/create';
      this.paymentInfo.orderSn=this.orderInfo.sn;
      let paymentInfo = this.qs.stringify(this.paymentInfo, {arrayFormat: 'repeat'});
      console.log('orderInfo = ' + paymentInfo);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, paymentInfo).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        if (responseBody.state == 20000) {
          this.$toast.success('支付成功!');
          this.$router.replace("/home/order-add");
        }else{
          this.$toast.fail(responseBody.message);
        }
      });
    }
  },
  mounted() {
    this.loadOrderInfo();
    this.loadCompany();
  }
}
</script>

<style scoped>

</style>
